<template>
  <div>
  <div class='publish-view' v-if='!publish'>
    <el-button type="primary" @click='isPublish'>
      <i class="fa fa-telegram" aria-hidden="true" style='margin: 0 5px'></i>
      开始发布
    </el-button>
  </div>
  <div class='link-view' v-if='publish'>
    <div class='left'>
      <div class='QR-code'>
        <vue-qr  :text="writeLink"></vue-qr>
        <el-link href="https://element.eleme.io" target="_blank">复制图片</el-link>
      </div>
      <div class='QR-download'>

      </div>
    </div>
    <div class='right'>
      <div class='right-title'>问卷链接</div>
      <el-row>
        <el-input placeholder="请输入内容" v-model="writeLink"  :disabled="true">
          <el-button  slot="append" @click='openLink'>打开链接</el-button>
        </el-input>
      </el-row>

      <el-row>
        <el-button @click='isNotPublish'>终止发布</el-button>
        <el-button @click='copyLink' class='linkBtn'>复制链接</el-button>
        <el-button> <i class="fa fa-weixin" aria-hidden="true"></i></el-button>
        <el-button><i class="fa fa-qq" aria-hidden="true"></i></el-button>
        <el-button><i class="fa fa-weibo" aria-hidden="true"></i> </el-button>
        <el-button><i class="fa fa-twitter" aria-hidden="true"></i></el-button>
      </el-row>
    </div>
  </div>
  </div>
</template>

<script>
import vueQr from 'vue-qr'
import Clipboard from 'clipboard'


export default {
  data() {
    return {
      projectKey: '',
      publish: false,
      writeLink: ''
    }
  },
  components: {
    vueQr
  },
  created () {
    this.projectKey = this.$route.query.projectKey
    const url = window.location.protocol + '//' + window.location.host
    this.writeLink = `${url}/write?key=${this.projectKey}`
    this.getStatus(this.projectKey)
  },
  methods: {
    isPublish () {
      this.publish = true
      this.$http.post('/project/publish',{ projectKey: this.projectKey }).then(res => {
        console.log('isPublish-----',res)
      })
    },

    isNotPublish() {
      this.publish = false
      this.$http.post('/project/stop',{ projectKey: this.projectKey }).then(res => {
        console.log('isNotPublish----',res)
      })
    },

    openLink () {
      window.location.href = this.writeLink;
      window.open();
    },

    copyLink () {
      const link = this.writeLink
      const clipboard = new Clipboard('.linkBtn', {
        // 通过target指定要复印的节点
        text: function() {
          return link
        }
      });
      clipboard.on('success',e => {
        e.clearSelection();
        this.$message.success('问卷链接已复制到粘贴板啦')
      });
      clipboard.on('error', e => {
        this.$message.error('复制错误，请重新复制吧~')
      });
      console.log(clipboard)
    },

    // 1：未发布 2：发布 3：停止
    getStatus (projectKey) {
      this.$http.get(`/project/getStatus/${projectKey}`).then(res => {
        if (res.data.data == 2)  this.publish = true
        if (res.data.data == 1 || res.data.data == 3) this.publish = false
        console.log(this.publish)
      })
    }
  }
  }
</script>
<style lang="less" scoped>
  .publish-view {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    min-height: 84vh;
    overflow: hidden;

  }
  .link-view {
    min-height: 400px;
    border-radius: 10px;
    border: 2px transparent dashed;
    margin: 15px 60px 60px;
    background-color: #fdfdfe;
    height: 90%;
    display: flex;
  }
  .left {
    flex:2;
    justify-content: center;   /* 子元素水平居中 */
    align-items: center;       /* 子元素垂直居中 */
    display: -webkit-flex;
    height: 100%;
    border-radius: 10px;
    background-color: #fbf6f2;
    float: left;

    .QR-code {
      border-radius: 6px;
      width: 194px;
      height: 194px;
    }
  }

  .right {
    flex: 3;
    overflow:hidden;
    padding: 90px 70px 10px 10px;
    text-align: left;
    background-color: #fdfdfe;
    border-radius: 10px;

    .right-title {
      font-size: 20px;
      margin: 20px;
      font-weight: bold;
      color: #373d41;
    }

  }
  .el-row {
    margin: 20px;
  }
  @media screen and (min-width: 1500px) {
    .right {
      padding: 120px 70px 10px 20px;
    }
    div /deep/.el-input > input{
      height: 50px;
    }
    div /deep/ .el-button {
      height: 50px;
      min-width: 70px;
    }
  }
</style>
